import React, { Component } from "react"
import fetchData from '../../util/fetch'
import { Row, Col } from 'antd'

class Service extends Component {
	constructor(props) {
		super(props)
		this.state = {
			title: "服务",
			homelist: [],
			banner: null,
			prenatalService: {
				contentList: [
					{ title: '孕期课程', data: [] },
					{ title: '孕期美丽管理', data: [] },
					{ title: '全程孕期专家咨询服务', data: [] }],
				img1Url: '',
				summary: "",
				title: "产前服务"
			},//产前服务
			
			motherService: {
				contentList: [
					{ title: '入住当日', data: [] },
					{ title: '离所之后', data: [] },
					{ title: '修养期间', data: [] },
					{ title: '分娩陪护', data: [] }],
				img1Url: '',
				img2Url: '',
				summary: '',
				title: "妈妈服务"
			}, //妈妈服务
			
			babyService: {
				contentList: [
					{ title: '入住当日', data: [] },
					{ title: '修养期间', data: [] },
					{ title: '离所之时', data: [] }],
				img1Url: '',
				summary: '',
				title: "宝宝服务"
			},//宝宝服务
			
			monthOfMeals: {
				contentList: [
					{ title: '入住当日', data: [] }
				],
				img2Url: '',
				img1Url: '',
				summary: '',
				title: "月子膳食"
			},//月子膳食
			outpatientServices: {
				content: '',
				img1Url: '',
				title: ''
			},//门诊服务
			environment: {
				content: '',
				img1Url: '',
				title: ''
			}//星级环境
		}
	}
	
	getData(url, opts) {
		fetchData(url, opts, function (res) {
			let data = eval(res.data)
			let { img1Url, img2Url, summary, title, content } = data;
			let contentList = [];
			switch (opts.str) {
				case '2-1':
					contentList = eval(content)
					contentList.map((v, k) => {
						v.data = v.data.split('#')
					})
					let prenatalService = { img1Url, summary, title, contentList }
					this.setState({
						prenatalService
					});
					break;
				case '2-2':
					contentList = eval(content)
					contentList.map((v, k) => {
						v.data = v.data.split('#')
					})
					let motherService = { img1Url, img2Url, summary, title, contentList }
					this.setState({
						motherService
					});
					break;
				case '2-3':
					contentList = eval(content)
					contentList.map((v, k) => {
						v.data = v.data.split('#')
					})
					let babyService = { img1Url, summary, title, contentList }
					this.setState({
						babyService
					});
					break;
				case '2-4':
					contentList = eval(content)
					contentList.map((v, k) => {
						v.data = v.data.split('#')
					})
					let monthOfMeals = { img1Url, img2Url, summary, title, contentList }
					this.setState({
						monthOfMeals
					});
					break;
				case '2-5':
					console.log(data, '门诊服务')
					this.setState({
						outpatientServices: data
					});
					break;
				case '2-6':
					console.log(data, '星级环境')
					this.setState({
						environment: data
					});
					break;
			}
		}.bind(this))
	}
	
	getBannerData(url, opts) {
		fetchData(url, opts, function (res) {
			let data = eval(res.data);
			this.setState({
				banner: data
			});
		}.bind(this));
	}
	
	componentWillMount() {
		//banner类型 1首页、2hibaby服务、3美研中心、4活动咨询、5新妈分享、6关于Hibaby
		this.getBannerData('/crm/api/v1/web/banner/findOneByType', { "dataId": 21 });
		//2-1	产前服务
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "2-1" });
		// 2-2	妈妈服务
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "2-2" });
		//  2-3	宝宝服务
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "2-3" });
		// 2-4	月子膳食
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "2-4" });
		// 2-5	门诊服务
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "2-5" });
		// 2-6	星际环境
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "2-6" });
	}
	
	componentDidMount() {
		if (this.props.params.anchor) {
			const anchor = '.' + this.props.params.anchor;
			setTimeout(function () {
				$("html,body").animate({ scrollTop: $(anchor).offset().top }, 500)
			}, 350)
		}
	}
	
	
	render() {
		const { environment, motherService, prenatalService, babyService, monthOfMeals, outpatientServices } = this.state;
		return (
			<div className="service">
				<div className="service-banner">
					<img src={this.state.banner ? this.state.banner.imgUrl : null}/>
				</div>
				
				{/*产前服务*/}
				<div className="serviceContent prenatalService">
					<h2>{prenatalService.title }</h2>
					<p className="txtTitle">{prenatalService.summary }</p>
					<Row>
						<Col span={6}>
							<div className='colContent'>
								<h3>{prenatalService.contentList[0].title}</h3>
								
								{
									prenatalService.contentList[0].data.map((v, k) => {
										return (
											<p><span>•</span>{v}</p>
										)
									})
								}
							
							</div>
						</Col>
						<Col span={6}>
							<div className='colContent'>
								<h3>{prenatalService.contentList[1].title}</h3>
								
								{
									prenatalService.contentList[1].data.map((v, k) => {
										return (
											<p><span>•</span>{v}</p>
										)
									})
								}
							
							</div>
							<div className='colContent widthColContent'>
								<h3>{prenatalService.contentList[2].title}</h3>
								<p >
									<div >
										{
											prenatalService.contentList[2].data.map((v, k) => {
												return (
													
													<p className="widthColContentP" key={k}>{v}</p>
												)
											})
										}
									</div>
								
								</p>
							</div>
						</Col>
						<img src={prenatalService.img1Url} alt="产前服务"/>
					
					</Row>
				</div>
				
				{/*妈妈服务*/}
				<div className="bg">
					<div className="serviceContent motherService">
						<h2>{motherService.title }</h2>
						<p className="txtTitle">{motherService.summary }</p>
						<img src={motherService.img1Url} alt="妈妈服务" className="bigImg"/>
						<Row className='topRow'>
							<Col span={8} className='topCol'>
								<div className="colContent">
									<h3>{motherService.contentList[0].title}</h3>
									{
										motherService.contentList[0].data.map((v, k) => {
											return (
												<p key={k}><span>•</span>{v}</p>
											)
										})
									}
								</div>
							</Col>
							<Col span={8} className='centerCol'>
								<div className="colContent">
									<h3>{motherService.contentList[1].title}</h3>
									{
										motherService.contentList[1].data.map((v, k) => {
											return (
												<p key={k}><span>•</span>{v}</p>
											)
										})
									}
								</div>
							</Col>
							
							<Col span={8} className='footCol'>
								<div className="colContent">
									<h3>{motherService.contentList[2].title}</h3>
									{
										motherService.contentList[2].data.map((v, k) => {
											return (
												<p key={k}><span>•</span>{v}</p>
											)
										})
									}
								</div>
							
							</Col>
						</Row>
						<Row className='footRow'>
							<Col span={16}>
								<div className="colContentBox">
									<div className="colContent">
										<h3>{motherService.contentList[3].title}</h3>
										{
											motherService.contentList[3].data.map((v, k) => {
												return (
													<p key={k}><span>•</span>{v}</p>
												)
											})
										}
									</div>
								</div>
							</Col>
							
							<Col span={8}>
								<img src={motherService.img2Url} alt="妈妈服务"/>
							</Col>
						</Row>
					</div>
				</div>
				
				{/*宝宝服务*/}
				<div className="serviceContent babyService">
					<h2>{babyService.title }</h2>
					<p className="txtTitle">{babyService.summary }</p>
					<Row>
						<Col span={11}>
							<img src={babyService.img1Url} alt="宝宝服务"/>
						</Col>
						<Col span={13}>
							<div className="colContentBg">
								<div className="colContent">
									<h3>{babyService.contentList[0].title}</h3>
									{
										babyService.contentList[0].data.map((v, k) => {
											return (
												<p key={k}><span>•</span>{v}</p>
											)
										})
									}
								</div>
							</div>
							<div className="colContentBg">
								<div className="colContent ">
									<h3>{babyService.contentList[1].title}</h3>
									{
										babyService.contentList[1].data.map((v, k) => {
											return (
												<p><span>•</span>{v}</p>
											)
										})
									}
								</div>
							</div>
							<div className="colContentBg">
								<div className="colContent">
									<h3>{babyService.contentList[2].title}</h3>
									{
										babyService.contentList[2].data.map((v, k) => {
											return (
												<p><span>•</span>{v}</p>
											)
										})
									}
								</div>
							</div>
						</Col>
					</Row>
					
					
					{/*<h2>{this.state.babyService ? this.state.babyService.title : null}<span></span></h2>*/}
					{/*<p>{this.state.babyService ? this.state.babyService.summary : null}</p>*/}
					{/*<div className="serviceCon-box">*/}
					{/*<div className="serviceBox-left">*/}
					{/*<img src={this.state.babyService ? this.state.babyService.img1Url : null}/></div>*/}
					{/*{this.initBabyService()}*/}
					{/*</div>*/}
				</div>
				
				{/*膳食服务*/}
				<div className="bg-box">
					<div className="serviceContent monthOfMeals">
						<h2>{monthOfMeals.title }</h2>
						<p className="txtTitle">{monthOfMeals.summary }</p>
						<Row>
							<Col span={12}>
								<div className="colContent">
									<h3>{monthOfMeals.contentList[0].title}</h3>
									{
										monthOfMeals.contentList[0].data.map((v, k) => {
											const newline = v.match('<br/>');
											if (newline != null) {
												const list = v.substring(0, newline.index);
												const listTwo = v.substring(newline.index + 5);
												return (
													<div key={k}>
														<p ><span>•</span>{list}</p>
														<p >{listTwo}</p>
													</div>
												)
											} else {
												return (
													<p key={k}><span>•</span>{v}</p>
												)
											}
										})
									}
								</div>
							</Col>
							<Col span={12}>
								<img src={monthOfMeals.img1Url} alt=""/>
							</Col>
						</Row>
						<div className="footImg">
							<img src={monthOfMeals.img2Url} alt="补身"/>
						</div>
					</div>
				
				</div>
				
				{/*门诊服务*/}
				<div className="serviceContent outpatientServices">
					<Row>
						<Col span={12}>
							<img src={outpatientServices.img1Url} alt="门诊服务"/>
						</Col>
						<Col span={12}>
							<div className="titleShadow">
								<h2 dangerouslySetInnerHTML={{ __html: outpatientServices.summary }}></h2>
								<p className="txtTitle" dangerouslySetInnerHTML={{ __html: outpatientServices.content }}></p>
							</div>
						
						</Col>
					</Row>
				</div>
				
				{/*星级环境*/}
				{/*<div className="bg-box">*/}
				{/*<div className="serviceContent environment">*/}
				{/*<Row>*/}
				{/*<Col span={16}>*/}
				{/*<h2>{environment.title}</h2>*/}
				{/*<p className="txtTitle">{environment.summary}</p>*/}
				{/*</Col>*/}
				{/*<Col span={8}>*/}
				{/*<img src={environment.img1Url} alt="星级环境"/>*/}
				{/*</Col>*/}
				{/**/}
				{/*</Row>*/}
				{/*</div>*/}
				{/*</div>*/}
			
			</div>
		)
	}
}
export default Service;
